<template>
	<view class="order_success">
		<view class="order_status">
			<image style="width: 150px;height: 150px;" mode="widthFix"
				src='https://img.youxuanan.com/crmebimage/public/product/2024/10/16/df0b080038eb4e53981239f916b8f95e72noo64adp.png'>
			</image>

			<view class="order_tips">{{isBuyout ?  '应付买断金' : '应付金额'}}</view>
			<view class="order_price">¥{{isBuyout ? info.buyoutAmount :info.payment}}</view>
		</view>

		<view class="peisong" v-if="!isBuyout">
			<view class="justify-between">
				<text v-if="info.isPay == '0'">首期租金</text>
				<text v-else>租金</text>
				<view>¥{{info.periodicRent}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.guaranteeCost">
				<text>意外保障</text>
				<view>¥{{info.guaranteeCost}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.securityFundPayment">
				<text>履约保证金</text>
				<view>¥{{info.securityFundPayment}}</view>
			</view>

			<view class="justify-between" style="margin: 20px 0;" v-if="info.couponAmount">
				<text>优惠券</text>
				<view>¥{{info.couponAmount}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.overdueAmount">
				<text>逾期费</text>
				<view>¥{{info.overdueAmount}}</view>
			</view>
		</view>


		<view class="peisong" v-else>
			<view class="justify-between">
				<text>应付买断金</text>
				<view>¥{{info.buyoutAmount}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.couponAmount">
				<text>优惠券</text>
				<view>{{info.couponAmount}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.securityFundPayment">
				<text>履约保证金</text>
				<view>{{info.securityFundPayment}}</view>
			</view>
			<view class="justify-between" style="margin: 20px 0;" v-if="info.overdueAmount">
				<text>逾期费</text>
				<view>{{info.overdueAmount}}</view>
			</view>
		</view>

		<view class="order_btn">
			<button @click="toBuy">立即支付</button>
		</view>
	</view>
</template>

<script>
	import {
		payingInfo,
		toJsPaing,
		continueBill
	} from '@/api/order.js';
	export default {
		data() {
			return {
				isBuyout: '',
				orderNo: '',
				info: '',
				renewal: '' //1是续租 否则不是
			}
		},
		methods: {
			toBuy() {
				const idCont = JSON.parse(uni.getStorageSync('userOnlyId'));
				const accountInfo = uni.getAccountInfoSync();
				const appid = accountInfo.miniProgram.appId;
				console.log('小程序appid:', appid);
				let paySubmit = {
					orderNo: this.orderNo,
					isBuyout: this.isBuyout,
					appOpenId: appid,
					buyerOpenId: idCont.openId
				}
				if(this.renewal == 1){
					paySubmit.stageNo = this.info.stageNo;
				}
				toJsPaing(paySubmit)
					.then(res => {
						if (res.code == 200) {
							const row = JSON.parse(res.data)
							console.log(row.alipay_trade_create_response.trade_no, '请求参数')
							my.tradePay({
								// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
								tradeNO: row.alipay_trade_create_response.trade_no,
								success: res => {
									my.alert({
										content: JSON.stringify(res),
									});
									uni.switchTab({
										url: '/pages/index/index',
									})
								},
								fail: error => {
									my.alert({
										content: error
									});
								},
							});
						} else {
							my.alert({
								content: res.message
							});
						}
					})
					.catch(err=>{
						my.alert({
							content: err
						});
					})
			}
		},
		onLoad(options) {
			this.isBuyout = options.isBuyout == 0 ? false : true;
			this.orderNo = options.orderNo;
			this.renewal = options.renewal;
			console.log(options, '传值')
			if (this.renewal != 1) { //不是续租
				payingInfo(this.isBuyout, this.orderNo)
					.then(res => {
						this.info = res.data;
					})
					.catch(err=>{
						this.$util.Tips({
							title: err
						});
					})
			} else {
				continueBill(this.orderNo)
					.then(res => {
						this.info = res.data;
					})
			}

		}
	}
</script>

<style scoped lang="scss">
	.order_success {
		text-align: center;

		.order_status {
			background-color: white;
			padding: 30px 0 10px 0;

			.order_tips {
				font-size: 1.2em;
				padding: 5px 25px;
				font-weight: bold;
			}

			.order_price {
				font-size: 1.4em;
				padding: 5px 25px;
			}
		}

		.order_freeBox {
			width: 85%;
			padding: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;
			background-color: rgba(255, 110, 19, 1);
			margin: 15px auto;
			border-radius: 15px;

			& view:nth-child(2) {
				width: 50%;
				font-size: .8em;

			}

			& view:last-child {
				button {
					height: 30px;
					line-height: 30px;
					background-color: white;
					color: rgba(255, 110, 19, 1);
					font-size: .9em;
					padding: 0 20px;
					border-radius: 15px;
				}
			}
		}

		.order_btn {
			margin-top: 35px;

			button {
				width: 90%;
				border-radius: 20px;
				background-color: rgba(255, 110, 19, 1);
				color: white;
				line-height: 45px;
				margin: 0 auto;
			}
		}
	}

	.peisong {
		padding: 20px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.peisong-item {
		margin: 20px 0;
	}

	.peisong-tips {
		font-size: 12px;
		color: #989898;
		margin-left: 20px;
		/* 溢出省略显示省略号一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 20px;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}
</style>